@charset "UTF-8";

.whiteBg{width: 81px;height: 81px;background-color: #fff;overflow: hidden;border-radius: 50%;overflow: hidden;display: inline-block;}
.refreshWrap{width: calc(100% - 1px);height: calc(100% - 1px);border-radius: 50%;background-color: #1abcb0;position: relative;display: inline-block;}
.refreshHelp{width: calc(100% - 10px);height: calc(100% - 10px);border-radius: 50%;background-color: #fff;position: absolute;top: 0;bottom: 0;left: 0;margin: auto;}
.refreshHiddenHelp{width: 100%;height: 50%;background-color: #fff;position: absolute;bottom: 0;left: 0;}
.refreshHead{width: 10px;height: 10px;border-radius: 50%;background-color: #1abcb0;position: absolute;top: -5px;right: 0;}

.red{background-color: #e10098;}
.purple{background-color: #756ed5;}
.blue{background-color: #28b5f2;}

.refreshAnimation{animation: refresh 1s infinite;}
@keyframes refresh {
  0% {transform: rotate(0deg);}
  10% {transform: rotate(36deg);}
  20% {transform: rotate(72deg);}
  30% {transform: rotate(108deg);}
  40% {transform: rotate(144deg);}
  50% {transform: rotate(180deg);}
  60% {transform: rotate(216deg);}
  70% {transform: rotate(252deg);}
  80% {transform: rotate(288deg);}
  90% {transform: rotate(324deg);}
  100% {transform: rotate(360deg);}
}
